<template>
	<div :class="$style.user">
		<div :class="$style.touxiang">
			<label>{{datUser3?.username}}</label>
		</div>
		<!-- <div class="btn" :class="$style.quit">
			<label>退出</label>
		</div> -->
	</div>
</template>

<script setup>
	import {
		onMounted, //页面初始化
		onUnmounted, //页面卸载
		nextTick,
		computed,
		reactive,
		watch, //监控
		ref, //
		toRefs
	} from "vue";
	import {
		useStore
	} from "vuex";

	const store = useStore();
	const {
		datUser3
	} = toRefs(store.state);

	//事件抛出
	//外层绑定@onFn="hOnFn"
	const emit = defineEmits(['onFn', 'onUnSave']);
	//触发
	const hOnFn = (t) => {
		emit('onFn', t);
	}

	const hFn = () => {

	}
	//属性导出
	//使用方法 ref="rdom" rdom.value.hFn()
	defineExpose({
		hFn
	});


	//属性定义
	//数据绑定v-bind:dat="dat"  	 
	const props = defineProps({
		dat: {
			type: Object
		},
	});



	onMounted(() => nextTick(() => {

	}));
	onUnmounted(() => {

	})
</script>

<style scoped lang="scss">

</style>

<style module lang="scss">
	/**
	 * 类名会被打乱
	 *绑定方法   :class="[$style.fullscreen]"
	 *申明 .fullscreen 
   */
	.user {
		display: flex;
		justify-content: space-around;
		height: 100%;
		width: 100%;

		>* {
			height: 100%;
			display: flex;
			align-items: center;
			overflow: hidden;
			white-space: nowrap;
			justify-content: space-around;

			background-repeat: no-repeat;
			background-position: left;
			background-size: 30px auto;
		}
	}

	.touxiang {
		background-image: url(/imgs/头像.png);
		background-size: 25px auto;
		padding-right: 16px;
		text-indent: 36px;
		// border-right: 1px solid #a9cffd;
		min-width: 50px;
	}

	.quit {
		background-image: url(/imgs/退出.png);
		background-size: 20px auto;
		text-indent: 26px;
	}
</style>